<template>
  <div class="filter-box">
    <el-form class="filter-form" label-position="top">
      <el-form-item label="运营场景">
        <el-select v-model="formData.senceCode" placeholder="请选择">
          <el-option label="场景1" value="1"></el-option>
          <el-option label="场景2" value="2"></el-option>
          <el-option label="场景3" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="充电状态">
        <el-select v-model="formData.status" placeholder="请选择">
          <el-option label="状态1" value="1"></el-option>
          <el-option label="状态2" value="2"></el-option>
          <el-option label="状态3" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车辆类型">
        <el-select v-model="formData.type" placeholder="请选择">
          <el-option label="类型1" value="1"></el-option>
          <el-option label="类型2" value="2"></el-option>
          <el-option label="类型3" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="submit-box">
      <el-button @click="onSubmit">查询</el-button>
      <el-button @click="reset">取消</el-button>
    </div>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  const formData = ref({
    senceCode: "",
    status: "",
    type: "",
  });

  const onSubmit = () => {
    console.log(formData.value);
  };

  const reset = () => {
    formData.value = {
      senceCode: "",
      status: "",
      type: "",
    };
  };
</script>

<style lang="scss" scoped>
  .filter-box {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 20px;
    width: 200px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    .filter-form {
      :deep(.el-form-item ){
        margin-bottom: 10px;
        color: #fff;

        .el-form-item__label {
          color: #fff;
        }
        .el-select__wrapper {
          background: transparent;
        }
        .el-select__selected-item {
          color: #fff;
        }
        .el-select__icon {
          color: #fff;
        }
      }
    }
    .submit-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .el-button {
        width: 150px;
        height: 30px;
        margin: 10px 0;
      }
    }
  }
</style>
